<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>亿人宝 - 我的红包</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/user.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/css/jquery.datetimepicker.css}" type="text/css"/>
    <script th:src="@{/script/jquery.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/common.js}" type="text/javascript"></script>
    <script th:src="@{/script/user.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
    <link rel="stylesheet" th:href="@{/css/fenye.css}"/>
</head>
<body>
<div th:replace="common/public::head"></div>
<!--个人中心-->
<div class="wrapper wbgcolor">
    <div class="w1200 personal">
        <!--<div class="credit-ad"><img height="80" th:src="@{/images/clist1.jpg}" width="1000"></div>-->
        <div class="personal-left" id="personal-left">
            <ul>
                <li><span><a th:href="@{/per/index(option = 1)}"><i class="dot dot1"></i>账户总览</a></span></li>
                <li><span><a style="font-size:14px;text-align:center;width:115px;padding-right:35px;" th:href="@{/cap/cap_List}">资金记录</a></span></li>
                <li><span><a style="font-size:14px;text-align:center;width:115px;padding-right:35px;" th:href="@{/per/investlist(option = 1)}">投资记录</a></span>
                </li>
                <li><span><a style="font-size:14px;text-align:center;width:115px;padding-right:35px;" th:href="@{/per/prolist}">回款计划</a></span></li>
                <li><span><a th:href="@{/per/thirdparty}"><i class="dot dot02"></i>开通第三方</a> </span></li>
                <li><span><a th:href="@{/per/torecharge}"><i class="dot dot03"></i>充值</a></span></li>
                <li><span><a th:href="@{/per/towithdrawal}"><i class="dot dot04"></i>提现</a></span></li>
                <li class="pleft-cur" style="position:relative;"><span> <a th:href="@{/per/toredenvelopes(state = 1)}"> <i
                        class="dot dot06"></i> 我的红包 </a> </span></li>
                <li style="position:relative;"><span> <a th:href="@{/per/tomessages}"><i class="dot dot08"></i>系统信息 </a> </span></li>
                <li><span><a th:href="@{/setUser/toView}"><i class="dot dot09"></i>账户设置</a></span></li>
            </ul>
        </div>
        <label id="typeValue" style="display:none;"> </label>
        <style type="text/css">
            .wdhb-tab .on a {
                color: #fff;
            }
        </style>
        <div class="personal-main">
            <div class="personal-zqzr personal-xtxx" style="min-height: 465px;padding-bottom: 0px;">
                <h3><i>我的红包</i></h3>
                <div class="lx-wdhb">
                    <span class="pay-title">兑换红包</span>
                    <span class="pay-number">
                        <form action="" id="codeForm" method="post" name="codeForm" onsubmit="return exchange()">
                            <input class="pay-money-txt" id="code" name="rname" placeholder="输入验证码，兑换相应面值的红包!" type="text">
                            <input class="btn-dh" name="codeForm:j_idt73" type="submit" value="兑换">
                            <span class="cz-error" style="display:none;">
                                <span class="error">红包兑换码不能为空！</span>
                            </span>
                        </form>
                    </span>
                </div>
                <form action="" id="form" method="post" name="form">
                    <script type="text/javascript">
                        clearPage = function () {
                            PrimeFaces.ab({source: 'form:j_idt76', formId: 'form', process: 'form:j_idt76', params: arguments[0]});
                        }
                    </script>
                    <span id="form:dataTable">
                        <div class="wdhb-tab" id="wdhb-tab">
                        <ul id="paysSpan">
                            <a th:href="@{/per/toredenvelopes(state = 1)}" title="未使用"><li th:class="${state == 1} ? on">未使用 </li></a>
                            <a th:href="@{/per/toredenvelopes(state = 2)}" title="已使用"><li th:class="${state == 2} ? on">已使用</li></a>
                            <a th:href="@{/per/toredenvelopes(state = 3)}" title="已过期"><li th:class="${state == 3} ? on">已过期</li></a>
                        </ul>
                        </div>
                        <div class="wdhb-title" th:if="${state == 1 or state == 3}">
                            <span class="wdhb-name">红包名称</span>
                            <span class="wdhb-con">红包简介</span>
                            <span class="wdhb-deadline" style="width: 200px">截止日期</span>
                            <span class="wdhb-status">状态</span>
                        </div>
                        <div class="wdhb-title" th:if="${state == 2}">
                            <span class="wdhb-name">红包名称</span>
                            <span class="wdhb-con">红包简介</span>
                            <span class="wdhb-deadline" style="width: 200px">兑换时间</span>
                            <span class="wdhb-status">状态</span>
                        </div>
                        <div class="zqzr-list" th:if="${size != 0}">
                            <ul th:each="li:${redp.data}">
                                <li style="width: 880px" th:if="${state == 1 or state == 3}">
                                    <span class="wdhb-name" th:text="${li.name}">现金50元</span>
                                    <span class="wdhb-con" th:text="${li.describe}">可以作为投资使用</span>
                                    <span class="wdhb-deadline" style="width: 200px" th:text="${li.deadline}">2015-10-1</span>
                                    <span class="wdhb-status" th:if="${li.state == 1}">未使用</span>
                                    <span class="wdhb-status" th:if="${li.state == 2}">已使用</span>
                                    <span class="wdhb-status" th:if="${li.state == 3}">已过期</span>
                                </li>
                                <li style="width: 880px" th:if="${state == 2}">
                                    <span class="wdhb-name" th:text="${li.name}">现金50元</span>
                                    <span class="wdhb-con" th:text="${li.describe}">可以作为投资使用</span>
                                    <span class="wdhb-deadline" style="width: 200px" th:text="${li.exchangeTime}">2015-10-1</span>
                                    <span class="wdhb-status" th:if="${li.state == 1}">未使用</span>
                                    <span class="wdhb-status" th:if="${li.state == 2}">已使用</span>
                                    <span class="wdhb-status" th:if="${li.state == 3}">已过期</span>
                                </li>
                            </ul>
                            <!--分页显示：-->
                            <div class="pagination" style="margin-top: 15px;width: 760px;">
                                <a th:class="${redp.currPage == 1} ? 'disabled' : ''" th:href="@{/per/toredenvelopes(currPage = 1, state = ${state})}"
                                   title="首页">首页</a>
                                <a th:class="${redp.currPage == 1} ? 'disabled' : ''"
                                   th:href="@{/per/toredenvelopes(currPage = ${redp.currPage - 1}, state = ${state})}" title="上一页">上一页</a>

                                <a th:if="${redp.totalPage > 4 && redp.currPage > 4}" th:text="...">...</a>
                                <a th:class="${pagenum == redp.currPage} ? 'current' : ''"
                                   th:each="pagenum:${#numbers.sequence((redp.currPage > 4 ? (redp.currPage - 3) : 1), ((redp.currPage + 3) < redp.totalPage ? (redp.currPage + 3): redp.totalPage))}"
                                   th:href="@{/per/toredenvelopes(currPage = ${pagenum}, state = ${state})}" th:text="${pagenum}">1</a>
                                <a th:if="${redp.totalPage > 4 && (redp.currPage + 3) < redp.totalPage}" th:text="...">...</a>

                                <a th:class="${redp.currPage == redp.totalPage} ? 'disabled' : ''"
                                   th:href="@{/per/toredenvelopes(currPage = ${redp.currPage + 1}, state = ${state})}" title="下一页">下一页</a>
                                <a th:class="${redp.currPage == redp.totalPage} ? 'disabled' : ''"
                                   th:href="@{/per/toredenvelopes(currPage = ${redp.totalPage}, state = ${state})}" title="尾页">尾页</a>
                            </div>
                        </div>
                        <div style="float:left; width:760px;height:200px;padding-top:100px; text-align:center;color:#d4d4d4; font-size:16px;"
                             th:if="${size == 0}">
                            <img height="60" th:src="@{/images/nondata.png}" width="60">
                            <br><br>
                            暂无红包记录
                        </div>
                    </span>
                </form>
            </div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<!--网站底部-->
<div class="ft" id="footer">
    <div th:replace="common/public::footer"></div>
</div>
<script type="text/javascript">
    //输入框红包鉴定
    var a = false;
    $("#code").blur(window.oninput = function () {
        var code = $("#code").val().trim();  //输入框的值
        var reg = /^[0-9a-zA-Z]+$/;  //英文和数字的正则表达式
        if (code == "" | code == null) {
            $(".cz-error").css({"display": "block"});
            a = false;
        } else if (!reg.test(code)) {
            $(".error").html("只能输入英文和数字");
            $(".cz-error").css({"display": "block"});
            a = false;
        } else {
            $(".error").html("");
            $(".cz-error").css({"display": "none"});
            a = true;
        }
    });

    //兑换按钮点击事件
    function exchange() {
        var code = $("#code").val().trim();  //输入框的值
        if (a) {
            let zzz = layer.load();
            $.ajax({
                url: '/erb/per/selredenvelopes',
                type: 'post',
                async: false,
                data: {exchangeCode: code},
                dataType: 'json',
                success: function (data) {
                    layer.close(zzz);
                    if (data == 0) {
                        $(".error").html("兑换码不存在");
                        $(".cz-error").css({"display": "block"});
                    } else if (data == 1) {
                        $(".error").html("兑换码已过期");
                        $(".cz-error").css({"display": "block"});
                    } else if (data == 2) {
                        $(".error").html("红包已领取过，不要再重复领取了");
                        $(".cz-error").css({"display": "block"});
                    } else if (data == 3) {
                        layer.msg('恭喜您！成功兑换一个红包，快去使用吧！', {time: 1000, icon: 6}, function () {
                            location.reload()
                        });
                    }
                }
            });
        }
        return false;
    }

    /*$('#paysSpan li ').click(function () {
        $(this).siblings().removeClass('on');  //删除同级元素的选中
        $(this).addClass('on');  //选中点击的元素
    })*/
</script>
</body>
</html>
